<template>
    <!-- 聊天记录 -->
    <div>
        <div 
            class="wxChatContentItem" 
            v-for="(item,index) in chatList" 
            :class="item.direction === 'right' ? 'flexDirectionRowReverse' : ''"
            :key="index">
            <div class="wxChatContentItemImg">
                <img :src="item.avator" alt="">
            </div>
            <div class="gap"></div>
            <div class="wxChatContentItemMsg">{{ item.msg }}</div>
            <div class="wxChatContentItemTime">{{ item.time }}</div>
        </div>
    </div>
</template>
<script>    
export default {
    name: 'ChatList',
    props:{
        chatList: {
            type: Array,
            default: () => []
        },
    },
}
</script>
<style scoped>
.wxChatContentItem {
    height: fit-content;
    display: flex;
    padding-left: 10px;
    padding-top: 10px;
    padding-right: 10px;
}
.wxChatContentItemImg{
    width: 30px;
    height: 30px;
    min-width: 30px;
    max-width: 30px;
    border-radius: 4px;
    overflow: hidden;
}
.wxChatContentItemImg img {
    width: 100%;
}
.wxChatContentItemMsg{
    max-width: calc(100% - 300px);
    background: var(--wxChatContentItemMsgBackground);
    border-radius: 5px;
    padding: 10px 15px;
    min-width: 15px; /* 最小宽度，防止浏览器缩小 */
    word-break: break-all; /* 内容过长时换行，防止长英文 */
    white-space: pre-wrap; /* 保留空格和换行 */
}
.gap{
    width: 10px;
    min-width: 10px;
    max-width: 10px;
}
.wxChatContentItemTime{
    font-size: 12px;
    padding: 0 10px;
}
.flexDirectionRowReverse{
    flex-direction: row-reverse
}
</style>